<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <title>聊天记录</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
  <link rel="stylesheet" href="${ctx}/imStatic/css/imStyle.css">
  <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
  <script type="text/javascript">
      var __ctx = "${ctx}";
  </script>
  <script src="${ctx}/layui/layui.js"></script>
  <script src="${ctx}/public/component.js" type="text/javascript"></script>
  <style>
  body .layim-chat-main{height: auto;position: absolute;bottom: 60px;top: 100px;left: 0;right: 0}
  .newsclassification .messlay li{display: inline;padding: 7px 14px;background: #ddd;border-radius: 6px;margin-right: 14px;cursor: pointer;-moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;}
  .active{background: #bbb!important;}
  </style>
</head>
<body>

<div class="newsclassification" style="position: absolute;height: 100px;width: 100%;margin-top: 10px">
  <div style="margin-top: 10px;margin: 0 auto;width: 60%">
    <input type="text" class="layui-input" style="width: 85%;display: inline;border-radius: 8px">
    <label class="findbtn" style="cursor: pointer;float: unset;display: inline" >搜索</label>
  </div>

  <div class="messlay" style="margin-top: 20px;text-align: center">
    <ul>
      <li data-index="" class="active allmes">全部</li>
      <li data-index="0">文本</li>
      <li data-index="1">图片</li>
      <li data-index="2" style="margin-right: 0">文件</li>
<!--      <li data-index="3">音频</li>-->
<!--      <li style="margin-right: 0" data-index="4">视频</li>-->
    </ul>
  </div>
</div>
<div class="layim-chat-main">
  <ul id="LAY_view"></ul>
</div>

<div id="LAY_page" style="margin: 0 10px;position: absolute;bottom: 0;right: 30px"></div>


<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.id == parent.layui.layim.cache().mine.id){ }}
    <li class="layim-chat-mine"><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite><i>{{ layui.data.date(item.timestamp) }}</i>{{ item.username }}</cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# } else { }}
    <li><div class="layim-chat-user"><img src="{{ item.avatar }}"><cite>{{ item.username }}<i>{{ layui.data.date(item.timestamp) }}</i></cite></div><div class="layim-chat-text">{{ layui.layim.content(item.content) }}</div></li>
  {{# }
}); }}
</textarea>

<!-- 
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html

-->

<script>
    layui.config({
        base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
    }).extend({
        index: 'index' //主入口模块
    }).use(['index','layim', 'laypage'], function(){
  var layim = layui.layim
  ,laytpl = layui.laytpl
  ,$ = layui.jquery
  ,laypage = layui.laypage;
        //msgType  0文本  1图片  2文件  3音频 4视频  空查所有
        var data = {"type":'${type}',"id":'${id}',"page":"1","msgType":''};
        var datatype='';
        var renderView = function(data){
            $.ajax({
                type : "get",
                url : "${ctx}/im/chatLogData",
                dataType : "json",
                data:data,
                success : function(ret){
                    var list = ret.data.list;
                    var pageBean = ret.data.pageBean;
                    var pageNo = pageBean.currentPage;
                    var totalSize = pageBean.totalCount;
                    var limit = pageBean.pageSize;
                    var html = laytpl(LAY_tpl.value).render({
                        data: list
                    });
                    $('#LAY_view').html(html);
                    //分页按钮
                    laypage.render({
                        elem: 'LAY_page'
                        ,curr:  pageNo
                        ,count: totalSize
                        ,limit: limit
                        ,groups: 4
                        ,jump: function(obj, first) {
                            if(!first) {
                                data.page = obj.curr;
                                renderView(data)
                            }
                        }
                    });
                }
            });
        };
         renderView(data);
      $('.newsclassification .findbtn').click(function () {
        $('.newsclassification .messlay li').removeClass('active');
        $('.newsclassification .messlay li.allmes').addClass('active');//点击搜索按钮    默认选中全部
        data.msgType='';
        data.findContent=$(this).parent().find('input').val();
        renderView(data);
      });
         $('.newsclassification .messlay li').click(function () {
           var index=$(this).attr('data-index');
           if(index==datatype){
             return false;
           }
           $(this).addClass('active').siblings().removeClass('active');
           $('.newsclassification .findbtn').parent().find('input').val('');//点击条件查询清空搜索框的值
           datatype=index;
           data.msgType=index;
           data.findContent='';
           renderView(data);
         })
    });
</script>
</body>
</html>
